<template>
  <div class="theme-active-text-color content">
    <div class="search_box">
      <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="用户名">
          <el-input v-model="formData.userName" placeholder="输入用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="submitAuth">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tag_box">
      <el-tag class="tag_list" v-for="(item,index) in authData" :key="index" closable type="warning" effect="dark" @close="closeAuth(item,index)">
        {{item | authFilter}}
      </el-tag>
    </div>

     <div class="auth_box">
      <div class="auth_tit">可选权限列表:</div>
      <el-tag class="tag_list" v-for="(item,index) in authList" :key="index" type="success" effect="dark" @click="checkTag(item)">
        {{item.name | authFilter}}
      </el-tag>
    </div>
    
  </div>
</template>

<script>
import { authDic } from "@/assets/auth.js"
import { userAuthApi,userAuthSaveApi } from "@/api"

export default {
  name: "",
  components: {},
  data() {
    return {
      formData:{
        userName:''
      },
      authData:[],
      authList:[],
    };
  },
  created() {
    for(let val in authDic){
      let obj = {
        name:val,
        isChoose:false
      }
      this.authList.push(obj)
    }
  },
  filters:{
    authFilter(val){
      return authDic[val]
    }
  },
  
  methods: {
     async onSubmit(){
       let that = this
       let res = await userAuthApi({
         userName:that.formData.userName
       })
       if(res){
         console.log(res.data[0].auth)
         this.authData = res.data[0].auth.split(',')
       }else{
         this.$message({
           message:"未找到该用户",
           type:'error'
         })
       }
     },

     closeAuth(item,index){
       this.authData.splice(index,1)
     },

     checkTag(item){
       console.log("1",this.authData)
       console.log("2",item.name)
       console.log("3",this.authData.indexOf(item.name))
       if(this.authData.indexOf(item.name)>-1){
         this.$message({
           message:"用户已存在该权限",
           type:'warning'
         })
       }else{
         this.authData.push(item.name)
       }
     },

     async submitAuth(){
       let that = this
       let authStr = this.authData.toString()
       if(that.formData.userName == ''){
         this.$message({
           message:"未选择用户",
           type:'error'
         })
         return
       }
       let res = await userAuthSaveApi({
         userName:that.formData.userName,
         auth:authStr
       })
       if(res){
         this.$message({
           message:"保存成功",
           type:'success'
         })
       }
     }
  }
};
</script>
<style lang="less" scoped>
.content{
  width: 100%;
  height: 100%;
  background: #fff;
  box-sizing: border-box;
  display: flex;
  overflow-y: auto;
  flex-direction: column;

  .search_box{
    width: 100%;
    line-height: 10px;
    padding: 30px 0px 0px 30px;
  }

  .tag_box{
    padding: 10px 0px 10px 30px;
    font-size: .15rem;

    .el-tag.el-tag--warning {
      display: inline-block;
      margin-left: 10px;
      margin-bottom: 10px;
      font-size: 17px;
      }
  }

  .auth_box{
    margin-top:50px;
    border-top: 1px solid rgb(240, 239, 239);
    padding: 10px 0px 10px 30px;
    font-size: .15rem;

    .auth_tit{
      font-size: .17rem;
      color: #000;
      font-weight: 600;
      margin: 20px 0px 20px 17px;
    }

    .el-tag.el-tag--success {
      cursor: pointer;
      display: inline-block;
      margin-left: 10px;
      margin-bottom: 10px;
      font-size: 17px;
      }
  }
}

</style>